<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://use.typekit.com/wsd6unn.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script><link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<script>  //This script will preload all images that are in the Body element.
$(document).ready(function () {$("body").queryLoader2(); //refers to a function found in attached js file jquery.queryloader2.js
	}); </script>

<body>
<script>
var selection="children";

$(function(){
	changeTopHeight();
	changeBG('1');
	changeGal('children');
});

$(window).resize(function(){
  changeTopHeight();
});

</script>
<div class="container">
  <div id="topPortfolio">
    <div id="navigation" class="navlist">
    <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">about</a></li>
          <li><a href="#portfolio">porfolio</a></li>
          <li><a href="#client_login">client login</a> </li>
          <a href="#book_a_session">Book A Session </a>
      </ul> 
    </div>
  </div>
  
  <div class="bottomPortfolio">
	<div id="linksPortfolio" class="navlist">
    <ul>
          <li><a name="children" id="children" href="#children" onclick="changeGal('children')">Children</a></li>
          <li><a id="women" href="#woman" onclick="changeGal('women')">Women</a></li>
          <li><a id="weddings" href="#weddings" onclick="changeGal('weddings')">Weddings</a></li>
          <li><a id="birthdays" href="#birthdays" onclick="changeGal('birthdays')">Birthdays</a> </li>
      </ul> 
    </div>
	<a href="#1" onclick="changeBG('1')"><img src="images/thumb1.fw.png" alt="" name="thumb1" class="thumbPortfolio"  id="thumb1" /> </a>
    <a href="#2" onClick="changeBG('2')"><img src="images/thumb2.fw.png" alt="" name="thumb2" class="thumbPortfolio"  id="thumb2" /></a>
    <a href="#3" onClick="changeBG('3')"><img class="thumbPortfolio" src="images/thumb3.fw.png" alt="" name="thumb3"  id="thumb3" /></a>
  	<a href="#4" onclick="changeBG('4')"><img class="thumbPortfolio" src="images/thumb4.fw.png" alt="" name="thumb4"  id="thumb4" /></a>
    <a href="#5" onclick="changeBG('5')"><img class="thumbPortfolio" src="images/thumb5.fw.png" alt="" name="thumb5"  id="thumb5" /></a>
    
    
    
    
  
  </div>
  

</div>
</body>
<!-- Javascript ! -->
<script>
 

var topIMG = document.getElementById("topPortfolio");

function changeTopHeight() {
	topIMG.style.height= ($(window).height()-120) +"px"
}
	

function changeBG(image) {
	selection = window.selection;
topIMG.style.backgroundImage= "url(images/portfolio/" + selection + "/" + image + ".jpg)"

}
 
function changeGal(selection) {
	
	window.selection=selection;
	
	if (selection == "children") { 
		document.getElementById("children").style.backgroundColor="#666";
		document.getElementById("women").style.backgroundColor="#333"; 
		document.getElementById("weddings").style.backgroundColor="#333";
		document.getElementById("birthdays").style.backgroundColor="#333";
	}
		else if (selection == "women") {
			document.getElementById("children").style.backgroundColor="#333";
			document.getElementById("women").style.backgroundColor="#666"; 
			document.getElementById("weddings").style.backgroundColor="#333";
			document.getElementById("birthdays").style.backgroundColor="#333";
		}
			else if (selection == "weddings") {
				document.getElementById("children").style.backgroundColor="#333";
				document.getElementById("women").style.backgroundColor="#333"; 
				document.getElementById("weddings").style.backgroundColor="#666";
				document.getElementById("birthdays").style.backgroundColor="#333";
			}
				else if (selection == "birthdays") {
					document.getElementById("children").style.backgroundColor="#333";
					document.getElementById("women").style.backgroundColor="#333"; 
					document.getElementById("weddings").style.backgroundColor="#333";
					document.getElementById("birthdays").style.backgroundColor="#666";
				}
				changeThumbs();
				function changeThumbs(){
					document.getElementById("thumb1").src="images/portfolio/"+selection+"/1.jpg";
					document.getElementById("thumb2").src="images/portfolio/"+selection+"/2.jpg";
					document.getElementById("thumb3").src="images/portfolio/"+selection+"/3.jpg";
					document.getElementById("thumb4").src="images/portfolio/"+selection+"/4.jpg";
					document.getElementById("thumb5").src="images/portfolio/"+selection+"/5.jpg";}
					
				/*function women(){
					document.getElementById("thumb1").src="images/portfolio/women/1.jpg";
					document.getElementById("thumb2").src="images/portfolio/women/2.jpg";
					document.getElementById("thumb3").src="images/portfolio/women/3.jpg";
					document.getElementById("thumb4").src="images/portfolio/women/4.jpg";
					document.getElementById("thumb5").src="images/portfolio/women/5.jpg";}
				
				function weddings(){
					document.getElementById("thumb1").src="images/portfolio/weddings/1.jpg";
					document.getElementById("thumb2").src="images/portfolio/weddings/2.jpg";
					document.getElementById("thumb3").src="images/portfolio/weddings/3.jpg";
					document.getElementById("thumb4").src="images/portfolio/weddings/4.jpg";
					document.getElementById("thumb5").src="images/portfolio/weddings/5.jpg";}
				
				function birthdays(){
					document.getElementById("thumb1").src="images/portfolio/birthdays/1.jpg";
					document.getElementById("thumb2").src="images/portfolio/birthdays/2.jpg";
					document.getElementById("thumb3").src="images/portfolio/birthdays/3.jpg";
					document.getElementById("thumb4").src="images/portfolio/birthdays/4.jpg";
					document.getElementById("thumb5").src="images/portfolio/birthdays/5.jpg";}	
				*/	
				}







</script>
</html>
